<template>
    <div class="header">
        <div class="content relative">
            <div class="left">
                <img class="img" src="@assets/imgs/logo.svg" />
                <!-- <p class="logo_text">{{ logo_text }}</p> -->
            </div>
            <div class="center">
                <div class="list">
                    <span>{{ $t('header.main') }}</span>
                </div>
                <div class="list" @mousemove="showMenu = true" @mouseleave="showMenu = false">
                    <span>{{ $t('header.hash_rate') }}</span>
                </div>
                <div class="list">
                    <span>{{ $t('header.mining_pool') }}</span>
                </div>
                <div class="list">
                    <span>{{ $t('header.fiat_currency') }}</span>
                </div>
                <div class="list">
                    <span>{{ $t('header.financial_management') }}</span>
                </div>
                <div class="list">
                    <span>{{ $t('header.news') }}</span>
                </div>
                <div class="list">
                    <span>{{ $t('header.coin_haha') }}</span>
                </div>
                <div class="list">
                    <span>{{ $t('header.personal_center') }}</span>
                </div>
            </div>
            <div class="right">
                <span class="msg_not" v-if="!user.mobileEmail">
                    <v-button :class="{'select': loginRegister === 1}" @click="jumpURL('/login_register', { type: 1 })">{{ $t('login_register.login') }}</v-button>
                    <v-button :class="{'select': loginRegister === 2}" @click="jumpURL('/login_register', { type: 2 })">{{ $t('login_register.register') }}</v-button>
                </span>
                <span class="msg_has" v-else>
                    <span class="account overflow_1">{{ user.mobileEmail }}</span>
                    <a href="javascript:void(0)" class="logout" @click="doLogout()">{{ $t('header.log_out') }}</a>
                </span>
                <span class="select_languages pointer" @click="showLanguageBox = !showLanguageBox">
                    {{ language.select }}
                    <i class="iconfont">&#xe634;</i>
                    <div :class="{'languages_box': true, 'hidden': !showLanguageBox}">
                        <div class="list" v-for="(item, index) of language.menu" :key="item.text" @click.stop="toggleLanguage(item)">
                            <span class="dis_ib" :style="getCountriesFlags(index)"></span>
                            <span class="va_m">{{ item.text }}</span>
                        </div>
                    </div>
                </span>
            </div>
        </div>
        <div :class="{'menu': true, 'hidden': !showMenu}" @mousemove="showMenu = true" @mouseleave="showMenu = false">
            <div class="content">
                <div class="list" v-for="item of currencysList" :key="item.id" @click="jumpHashRate(item)">
                    <div class="list_box">
                        <img :src="img_url_appSource + item.logo" />
                        <div class="text">
                            <span>{{ item.currency }}</span>
                            <span class="desc">{{ item.remark2 }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCurrencys } from '@doapis/currency/currency.js';

    export default {
        name: "Header",
        props: {
            select: {
                type: Number,
                default: -1
            },
            loginRegister: {
                type: Number,
                default: 1
            }
        },
        data: function() {
            return {
                showLanguageBox: false,
                showMenu: false,
                language: {
                    select: '简体中文',
                    menu: [
                        { text: '简体中文', label: 'zh_CN' },
                        { text: 'English', label: 'en_US' },
                        { text: 'Pусский' },
                        { text: 'Français' },
                        { text: 'Español' },
                        { text: 'Deutsch' },
                        { text: '日本語' },
                        { text: '한국어' },
                    ],
                },
                currencysList: [
                    { id: 1, img: 'main/currency_1.png', text: 'BTC/BCH', desc: 'SHA256矿机云算力' },
                    { id: 2, img: 'main/currency_1.png', text: 'LTC/BCH', desc: 'Scrypt矿机云算力' },
                    { id: 3, img: 'main/currency_3.png', text: 'ETH', desc: 'Ethash矿机云算力' },
                    { id: 4, img: 'main/currency_6.png', text: 'DASH', desc: 'X11矿机云算力' }
                ],
                user: {}
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            toggleLanguage: function(data) {
                this.showLanguageBox = false;
                this.language.select = data.text;
                $.cookie('multilingual', data.label, { expires: 30 });
                window.location.reload();
            },
            jumpURL: function(path, params) {
                if(this.$route.path === path) {
                    if(path === '/login_register') {
                        this.$emit('toggleLoginRegister', params);
                    } else {
                        window.location.reload();
                    }
                } else if (path === '/personal_center') {
                    this.$store.commit({
						type: 'togglePersonalMenuKEY',
						userDATA: null
                    });
                    this.$router.push({ path, query: params});
                } else {
                    if (path === '' || path === '/news') {
                        this.$modal.warning({
                            title: '操作提示！！',
                            content: '暂未开放！！',
                        });
                    } else {
                        this.$router.push({ path, query: params});
                    }
                }
            },
            listClick: function() {
                const that = this;
                const list = $('.center .list');
                const selectList = [
                    '/main', '/hash_rate', '', '', '', '/news', '/coin_haha', '/personal_center'
                ];
                const selectIndex = selectList.indexOf(this.$route.path);

                if (selectIndex > -1) {
                    list.eq(selectIndex).addClass('select');
                }

                list.click(function() {
                    that.jumpURL(selectList[$(this).index()]);
                });
            },
            doLogout: function() {
                this.$store.dispatch({
                    type: 'doLogout'
                });
            },
            getCountriesFlags: function(index) {
                return {
                    'width': '20px',
                    'height': '14px',
                    'vertical-align': 'middle',
                    'overflow': 'hidden',
                    'background': 'url("' + require('@assets/imgs/main/countries.png') + '") no-repeat ' + -(20 * index + 2 * index) + 'px 0'
                }
            },
            getHashRate: function() {
                const that = this;
                getCurrencys().then(function(res) {
                    that.currencysList = res.records;
                });
            },
            jumpHashRate: function(params) {
                this.$router.push({ path: '/hash_rate', query: { currency: params.currency }});
                // window.location.reload();
            }
        },
        mounted: function() {
            this.$nextTick(function() {
                this.listClick();
                this.getHashRate();

                if (this.userDATA) {
                    this.user = this.userDATA;
                }
            });
            
            const multilingual = $.cookie('multilingual');
            if (multilingual) {
                let current = '';
                this.language.menu.forEach(function(item) {
                    if (item.label === multilingual) current = item;
                });
                this.language.select = current.text;
            }
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .header{
        width: 100%;
        height: 80px;
        box-sizing: border-box;
        position: relative;
        background-color: @theme_color;
        color: white;
        .no_bg{
            background: none;
        }
        .content, .left, .right, .center{
            height: 100%;
        }
        .content{
            // display: table;
            margin: 0 10%;
            // margin: 0 auto;
        }
        .left{
            width: 50px;
            display: inline-block;
            margin-top: 8px;
            font-size: 10px;
            >.img{
                width: 60px;
            }
        }
        .center{
            display: inline-block;
            vertical-align: top;
            margin: 0 14% 0 6.5%;
            font-size: 13px;
            height: 100%;
            .list{
                display: inline-block;
                margin: 0 20px;
                height: 100%;
                line-height: 80px;
                text-align: center;
                cursor: pointer;
                span{
                    position: relative;
                }
                &:hover span:after,&.select span:after{
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    left: 20%;
                    right: 20%;
                    height: 2px;
                    background-color: white;
                }
            }
        }
        .right{
            position: absolute;
            right: 36px;
            top: 0;
            box-sizing: border-box;
            padding-top: 24px;
            font-weight: 700;
            .ant-btn{
                padding: 0 26px;
                color: white;
                background: none;
                &.select{
                    background-color: white;
                    color: #4c84ff;
                }
            }
            .msg_has{
                font-weight: normal;
                .account{
                    display: inline-block;
                    max-width: 200px;
                    vertical-align: middle;
                }
                .logout{
                    margin-left: 10px;
                    font-size: 10px;
                    color: white;
                    text-decoration: underline;
                    vertical-align: middle;
                }
            }
            .select_languages{
                height: 100%;
                display: inline-block;
                margin-left: 20px;
                position: relative;
                .iconfont{
                    font-size: 18px;
                }
                .languages_box{
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    margin-left: -65px;
                    z-index: 8;
                    padding: 4px 20px;
                    width: 130px;
                    height: auto;
                    font-weight: normal;
                    box-sizing: border-box;
                    line-height: 34px;
                    color: white;
                    border-radius: 4px;
                    border: 1px solid #eee;
                    background-color: #262A37;
                    overflow: hidden;
                    transition: 0.4s height;
                    .list{
                        padding: 4px 0;
                        font-size: 13px;
                        border-bottom: 1px solid #383B47;
                        cursor: pointer;
                        &:hover{
                            opacity: 0.7;
                        }
                    }
                }
            }
        }
        .menu{
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-height: 400px;
            z-index: 18;
            border-top: 1px solid var(--border_color);
            background-color: white;
            box-sizing: border-box;
            overflow: hidden;
            transition: 0.4s max-height;
            .content{
                // margin-left: 340px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                // width: 50%;
                padding: 20px 0;
                box-sizing: border-box;
                .list{
                    width: 25%;
                }
                .list_box{
                    display: inline-flex;
                    align-items: center;
                    width: 220px;
                    padding: 7px 0 7px 10px;
                    border-radius: 34px;
                    transition: 1.1s background;
                    >img{
                        height: 40px;
                    }
                    &:hover{
                        background-color: #eaeaea;
                        cursor: pointer;
                    }
                }
                .text{
                    margin: 4px 0 0 10px;
                    font-size: 19px;
                    color: #707070;
                    >span{
                        display: block;
                        line-height: 22px;
                    }
                }
                .desc{
                    font-size: 13px;
                    color: #8d939b;
                }
            }
        }
        .hidden{
            max-height: 0!important;
            padding: 0!important;
            border: none!important;
        }
    }
    @media screen and (max-width: @small_view) {
        .header{
            .content{
                margin: 0 4%;
            }
            .center{
                margin: 0 30px;
                .list{
                    margin: 0 10px;
                }
            }
        }
    }
</style>
<style>
    .header.no_bg{
        background-color: initial;
    }
</style>
